<template>
	<view class="searchmianbox">
		<qi-navtop :navzuoicof="'icon-icon-test59'"></qi-navtop>
		<view class="qisearch">
			<input
				type="text"
				placeholder="搜索"
				v-model="iptval"
				@input="inputdata"
				class="iconfont icon-icon-test12"
			/>
			<view
				v-if="Object.keys(iptval).length !== 0"
				class="iconfont icon-icon-test44"
				@tap="tapsubicon"
			></view>
		</view>
		<view class="searchsoso" v-if="updata.searchResults.length !== 0">
			<view
				v-for="(item, i) in updata.searchResults"
				:key="i"
				@tap="tapsearch(item)"
				class="sosolist"
			>
				<view class="text">{{ item.goods_name }}</view>
				<view class="iconfont icon-icon-test61"></view>
			</view>
		</view>
		<view>
			<view class="history">
				<view>搜索历史</view>
				<view class="iconfont icon-shanchu" @tap="cleandel"></view>
			</view>
			<view
				v-for="(item, i) in histories"
				@tap="gotoGoodsList(item)"
				:key="i"
				class="historylist"
			>
				<view>{{ item }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	ref,
	reactive,
	toRefs,
	onMounted,
	computed,
	getCurrentInstance
} from 'vue';
const updata = reactive({
	historyList: [],
	historyitem: '',
	searchResults: [],
	timer: null
});
let { timer, historyList } = toRefs(updata);
const { proxy } = getCurrentInstance();
let iptval = ref('');
onMounted(() => {
	updata.historyList = JSON.parse(
		uni.getStorageSync('histor') || '[]'
	);
	console.log(updata.historyList);
});
// let UserInfoNoParams = computed(() => getters['qi_cart/checkedGoodsAmount'])
let histories = computed(() => {
	return [...updata.historyList].reverse();
});
const inputdata = e => {
	clearTimeout(timer);
	timer = setTimeout(() => {
		updata.historyitem = e.detail.value;
		getSearchList();
	}, 500);
};
const tapsearch = item => {
	uni.navigateTo({
		url:
			'/subpages/goods_detail/goods_detail?goods_id=' + item.goods_id
	});
};
const getSearchList = () => {
	// 判断搜索关键词是否为空
	if (updata.historyitem.length === 0) {
		updata.searchResults = [];
		return;
	}
	proxy
		.$http({
			url: '/goods/qsearch',
			data: { query: updata.historyitem }
		})
		.then(res => {
			if (res.meta.status === 200) {
				updata.searchResults = res.message;
			}
		});
	saveSearchHistory();
};
const saveSearchHistory = () => {
	let set = new Set(updata.historyList);
	set.delete(updata.historyitem);
	set.add(updata.historyitem);
	// updata.historyList.unshift(updata.historyitem)
	updata.historyList = Array.from(set);
	// 对搜索历史数据，进行持久化的存储
	uni.setStorageSync('histor', JSON.stringify(updata.historyList));
};
const cleandel = () => {
	updata.historyList = [];
	uni.setStorageSync('histor', '[]');
};
const gotoGoodsList = val => {
	uni.navigateTo({
		url: '/subpages/goods_list/goods_list?query=' + val
	});
};
const tapsubicon = () => {
	iptval.value = '';
	updata.historyitem = '';
	updata.searchResults = [];
};
</script>

<style lang="scss" scoped>
.searchmianbox {
	.searchsoso {
		position: absolute;
		left: 0;
		right: 0;
		.text {
			font-size: 16px;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 1;
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}
		.sosolist {
			background-color: #fff;
			padding: 6px 10px;
			border-bottom: 1px solid;
			display: flex;
			justify-content: space-between;
		}
	}
	.qisearch {
		height: 50px;
		display: flex;
		align-items: center;
		padding: 0 10px;
		position: relative;
		background: linear-gradient(to right, #3388ee, #4db9f1);
		.icon-icon-test44 {
			position: absolute;
			right: 20px;
		}
		> input {
			background-color: #fff;
			flex: 1;
			border-radius: 90px;
			height: 36px;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			text-align: center;
			padding: 0 10px;
		}
	}
	.history {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10px;
		height: 40px;
	}
	.historylist {
		display: flex;
		display: inline-block;
		margin-top: 10px;
		view {
			padding: 5px 10px;
			border-radius: 10px;
			margin: 0 10px;
			background-color: #fff;
		}
	}
}
</style>
